<?xml version="1.0" encoding="UTF-8"?>

<div xmlns="http://www.w3.org/1999/xhtml" xid="window" class="window" component="$model/UI2/system/components/justep/window/window" data-bind="component:{name:'$model/UI2/system/components/justep/window/window'}" __justepbasexid__="__baseID__" components="$model/UI2/system/components/justep/row/row,$model/UI2/system/components/justep/panel/panel,$model/UI2/system/components/justep/panel/child,$model/UI2/system/components/justep/list/list,$model/UI2/system/components/justep/button/checkbox,$model/UI2/system/components/justep/model/model,$model/UI2/system/components/justep/window/window,$model/UI2/system/components/justep/button/radio,$model/UI2/system/components/justep/titleBar/titleBar,$model/UI2/system/components/justep/data/data,$model/UI2/system/components/justep/button/button,$model/UI2/system/components/justep/output/output,$model/UI2/system/components/justep/input/input,">  
  <div xmlns="" component="$model/UI2/system/components/justep/model/model" xid="model" style="display:none" data-bind="component:{name:'$model/UI2/system/components/justep/model/model'}" data-events="onLoad:loadData"/>  
  <div xmlns="" component="$model/UI2/system/components/justep/panel/panel" class="x-panel x-full" xid="panel1" data-bind="component:{name:'$model/UI2/system/components/justep/panel/panel'}"> 
    <div class="x-panel-content" xid="content1" component="$model/UI2/system/components/justep/panel/child" data-bind="component:{name:'$model/UI2/system/components/justep/panel/child'}"> 
      <div component="$model/UI2/system/components/justep/titleBar/titleBar" class="x-titlebar" xid="titleBar1" data-bind="component:{name:'$model/UI2/system/components/justep/titleBar/titleBar'}" data-config="{&quot;title&quot;:&quot;todos&quot;}"> 
        <div class="x-titlebar-left" xid="div1"> 
          <a component="$model/UI2/system/components/justep/button/button" class="btn btn-link btn-only-icon" xid="backBtn1" data-bind="component:{name:'$model/UI2/system/components/justep/button/button'}" data-events="onClick:{operation:'window.close'}" data-config="{&quot;icon&quot;:&quot;icon-chevron-left&quot;}"> 
            <i class="icon-chevron-left" xid="i8"/>  
            <span xid="span8"/> 
          </a> 
        </div>  
        <div class="x-titlebar-title" xid="div2">todos</div>  
        <div class="x-titlebar-right " xid="div3"> 
          <div class="empty"/> 
        </div> 
      </div>  
      <div component="$model/UI2/system/components/justep/row/row" class="x-row x-row-center" xid="row1" style="padding: 0px;" data-bind="component:{name:'$model/UI2/system/components/justep/row/row'}"> 
        <div xid="col1" style="padding: 15px 10px;" class="split-line"> 
          <span component="$model/UI2/system/components/justep/button/checkbox" class="x-checkbox" xid="allCompletedCheckbox" data-config="{&quot;checked&quot;:false,&quot;disabled&quot;:false}" data-bind="component:{ref:tempData.ref('allCompleted'),name:'$model/UI2/system/components/justep/button/checkbox'}" data-events="onChange:allCompletedCheckboxChange"> 
            <input xmlns:xhtml="http://www.w3.org/1999/xhtml" type="checkbox"></input>  
            <label xmlns:xhtml="http://www.w3.org/1999/xhtml"></label> 
          </span> 
        </div>  
        <div class="x-col" xid="col2"> 
          <input component="$model/UI2/system/components/justep/input/input" class="form-control" xid="titleInput" data-bind="component:{name:'$model/UI2/system/components/justep/input/input'},event:{keydown:$model._callModelFn.bind($model, 'titleInputKeydown')}"/> 
        </div>  
        <div xid="col3"> 
          <a component="$model/UI2/system/components/justep/button/button" class="btn btn-link btn-sm btn-only-icon" xid="addBtn" style="color:#008000;" data-bind="component:{name:'$model/UI2/system/components/justep/button/button'}" data-events="onClick:addTodo" data-config="{&quot;icon&quot;:&quot;icon-android-add&quot;,&quot;label&quot;:&quot;&quot;}"> 
            <i xid="i2" class="icon-android-add"/>  
            <span xid="span2"/> 
          </a> 
        </div> 
      </div>  
      <div component="$model/UI2/system/components/justep/list/list" class="x-list" xid="list1" data-bind="component:{name:'$model/UI2/system/components/justep/list/list'}" data-config="{&quot;data&quot;:&quot;todoData&quot;,&quot;filter&quot;:&quot;js:$model.tempData.val('status')=='All' || ($model.tempData.val('status')=='Active' &amp;&amp; !$row.val('completed')) || ($model.tempData.val('status')=='Completed' &amp;&amp; $row.val('completed'))&quot;}"> 
        <ul class="x-list-template hide" xid="listTemplateUl1" data-bind="foreach:{data:$model.foreach_list1($element),afterRender:$model.foreach_afterRender_list1.bind($model,$element)}"> 
          <li xid="li1"> 
            <div component="$model/UI2/system/components/justep/row/row" class="x-row x-row-center top-line" xid="row2" style="padding: 0px" data-bind="component:{name:'$model/UI2/system/components/justep/row/row'}"> 
              <div xid="col4" style="padding: 10px 10px;" class="split-line"> 
                <span component="$model/UI2/system/components/justep/button/checkbox" class="x-checkbox" xid="checkbox1" data-config="{&quot;checked&quot;:false,&quot;disabled&quot;:false}" data-bind="component:{ref:ref('completed'),name:'$model/UI2/system/components/justep/button/checkbox'}"> 
                  <input xmlns:xhtml="http://www.w3.org/1999/xhtml" type="checkbox"></input>  
                  <label xmlns:xhtml="http://www.w3.org/1999/xhtml"></label> 
                </span> 
              </div>  
              <div class="x-col" xid="col5"> 
                <div component="$model/UI2/system/components/justep/output/output" class="x-output" xid="output1" data-bind="component:{ref:ref('title'),name:'$model/UI2/system/components/justep/output/output'},css:{'title-completed': val('completed')}"/> 
              </div>  
              <div xid="col6"> 
                <a component="$model/UI2/system/components/justep/button/button" class="btn btn-link btn-sm btn-only-icon" xid="deleteBtn" style="color:#FF0000;" data-bind="component:{name:'$model/UI2/system/components/justep/button/button'}" data-events="onClick:deleteBtnClick" data-config="{&quot;icon&quot;:&quot;icon-android-close&quot;,&quot;label&quot;:&quot;&quot;}"> 
                  <i xid="i4" class="icon-android-close"/>  
                  <span xid="span4"/> 
                </a> 
              </div> 
            </div> 
          </li> 
        </ul> 
      </div>  
      <div component="$model/UI2/system/components/justep/row/row" class="x-row x-row-center top-line" xid="row3" style="height:35px;background-color:#D0D0FF;" data-bind="component:{name:'$model/UI2/system/components/justep/row/row'},visible:$model.todoData.getCount() &gt; 0"> 
        <div class="x-col" xid="col7" data-bind="text:($model.todoData.getCount() - tempData.val('completedCount')) + ' items left'"/>  
        <div xid="col8"> 
          <span component="$model/UI2/system/components/justep/button/radio" class="x-radio x-radio-sm" xid="radio2" name="statusRadio" checkedValue="All" label="All" data-config="{&quot;checked&quot;:false,&quot;checkedValue&quot;:&quot;All&quot;,&quot;disabled&quot;:false,&quot;label&quot;:&quot;All&quot;,&quot;name&quot;:&quot;statusRadio&quot;}" data-bind="component:{ref:tempData.ref('status'),name:'$model/UI2/system/components/justep/button/radio'}"> 
            <input xmlns:xhtml="http://www.w3.org/1999/xhtml" type="radio" name="statusRadio"></input>  
            <label xmlns:xhtml="http://www.w3.org/1999/xhtml">All</label> 
          </span>  
          <span component="$model/UI2/system/components/justep/button/radio" class="x-radio x-radio-sm" xid="radio3" name="statusRadio" label="Active" checkedValue="Active" data-config="{&quot;checked&quot;:false,&quot;checkedValue&quot;:&quot;Active&quot;,&quot;disabled&quot;:false,&quot;label&quot;:&quot;Active&quot;,&quot;name&quot;:&quot;statusRadio&quot;}" data-bind="component:{ref:tempData.ref('status'),name:'$model/UI2/system/components/justep/button/radio'}"> 
            <input xmlns:xhtml="http://www.w3.org/1999/xhtml" type="radio" name="statusRadio"></input>  
            <label xmlns:xhtml="http://www.w3.org/1999/xhtml">Active</label> 
          </span>  
          <span component="$model/UI2/system/components/justep/button/radio" class="x-radio x-radio-sm" xid="radio4" name="statusRadio" label="Completed" checkedValue="Completed" data-config="{&quot;checked&quot;:false,&quot;checkedValue&quot;:&quot;Completed&quot;,&quot;disabled&quot;:false,&quot;label&quot;:&quot;Completed&quot;,&quot;name&quot;:&quot;statusRadio&quot;}" data-bind="component:{ref:tempData.ref('status'),name:'$model/UI2/system/components/justep/button/radio'}"> 
            <input xmlns:xhtml="http://www.w3.org/1999/xhtml" type="radio" name="statusRadio"></input>  
            <label xmlns:xhtml="http://www.w3.org/1999/xhtml">Completed</label> 
          </span> 
        </div>  
        <div class="x-col" xid="col9"> 
          <a component="$model/UI2/system/components/justep/button/button" class="btn x-yellow btn-sm" xid="clearCompletedBtn" style="float:right;" data-bind="component:{name:'$model/UI2/system/components/justep/button/button'},text:'Clear completed (' + $model.tempData.val('completedCount') + ')',visible:$model.tempData.val('completedCount') &gt; 0,event:{click:$model._callModelFn.bind($model, 'clearCompletedBtnClick')}" data-config="{&quot;label&quot;:&quot;&quot;}"> 
            <i xid="i1"/>  
            <span xid="span1"/> 
          </a> 
        </div> 
      </div> 
    </div> 
  </div> 
</div>
